/* eslint-disable react/forbid-prop-types */
import PropTypes from 'prop-types'
import React, { Component } from 'react'
import { Dimensions, ScrollView, StyleSheet, View } from 'react-native'
import { px2dp } from 'rn-xiaobu-utils'
import TabIndicator from './TabIndicator'

const screenWidth = Dimensions.get('window').width
// const screenHeight = Dimensions.get('window').height

// 集成TabIndicator和需要滚动的子视图
export default class ScrollTabView extends Component {
    // 这里的属性基本就是TabIndicator的除了titles,这个是所有tab的名称,当然最后也是传给TabIndicator的
    static propTypes = {
      tabBarActiveTextColor: PropTypes.string,
      tabBarInactiveTextColor: PropTypes.string,
      titles: PropTypes.array,
      tabTextStyle: PropTypes.any,
      tabBarUnderlineStyle: PropTypes.any,
      tabHeight: PropTypes.number,
      tabWidth: PropTypes.number
    };
    static defaultProps = {
      tabBarActiveTextColor: '#686868',
      tabBarInactiveTextColor: '#cccccc',
      titles: [],
      tabHeight: 50
    };
    render () {
      return (
        <View style={styles.container}>
          <TabIndicator
            onTabPress={(index) => {
              this.sv.scrollTo({ x: index * screenWidth, y: 0, animated: true })
            }}
            ref={(r) => {
              if (r !== null) {
                this.tab = r
                r.swipeToTrans(this.props.index)
              }
            }
            }
            tabBarActiveTextColor={this.props.tabBarActiveTextColor}
            tabBarInactiveTextColor={this.props.tabBarInactiveTextColor}
            tabBarUnderlineStyle={this.props.tabBarUnderlineStyle}
            tabHeight={this.props.tabHeight}
            tabWidth={this.props.tabWidth}
            tabNames={this.props.titles}
            tabTextStyle={this.props.tabTextStyle}
          />
          <ScrollView
            horizontal
            showsHorizontalScrollIndicator={false}
            onScroll={(e) => {
              // console.log(e.nativeEvent.contentOffset.x / screenWidth)
              this.tab.swipeToTrans(Math.round(e.nativeEvent.contentOffset.x / screenWidth))
            }}
            pagingEnabled
            ref={(r) => {
              if (r !== null) {
                this.sv = r
                setTimeout(()=>{
                  // 父组件传入的参数的option（用于计算偏移，根据自己实际情况）
                  r.scrollTo({ x: this.props.index * screenWidth, y: 0, animated: true })
                }, 0)
              }
            }}
          >
            {/* 要展示的滚动视图 */}
            {this.props.children}
          </ScrollView>
        </View>
      )
    }
}
const styles = StyleSheet.create({
  container: {
    width: px2dp(750)
    // height: screenHeight
  }
})